iT邦幫忙

2024 iThome 鐵人賽

DAY 17
0

今天我想介紹一下如何tablayout 做出在同一個activty底下做分頁的效果。
主要資料夾檔案可以這樣創
image
image

在activity的ui建立一個tab+viewpager2

<com.google.android.material.tabs.TabLayout
      android:id="@+id/tab"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabIndicatorFullWidth="true"
      app:tabMaxWidth="0dp"
      app:tabGravity="fill"
      app:tabIndicatorGravity="stretch"
      app:tabSelectedTextColor="@color/blue"
      app:tabIndicatorColor="@color/purple"
      app:tabIndicatorHeight="2dp"
      android:orientation="horizontal">
      <com.google.android.material.tabs.TabItem
          android:layout_height="50dp"
          android:layout_width="0dp"
          android:text="頁面1"
          android:layout_weight="1" />

      <com.google.android.material.tabs.TabItem
          android:layout_height="50dp"
          android:layout_width="0dp"
          android:text="頁面2"
          android:layout_weight="1" />
  </com.google.android.material.tabs.TabLayout>

  <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/viewPager"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

程式

程式方面也是先宣告綁定activity的tablayout +viewpager 跟 一個adapter

private ViewPager2 viewPager;
private TabLayout tab;
private ViewPagerAdapter adapter;
        viewPager = findViewById(R.id.viewPager);
        tab = findViewById(R.id.tab);

在activity建立套用ViewPagerAdapter的adapter
adapter = new ViewPagerAdapter(this);
將adapter套用在viewPager
viewPager.setAdapter(adapter);
設定初始頁第0頁
viewPager.setCurrentItem(0);
設置一個TabLayoutMediator連結TabLayout 和 ViewPager2,並在裡面設定位置上顯示的字樣,同時在最後加上attach()在啟動時,同步tab和viewPager

new TabLayoutMediator(tab, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                if (position == 0) tab.setText("主頁");
                if (position == 1) tab.setText("分頁");
            }
        }).attach();

接下來在adapter建立一個專門切換頁面,並指定切換的子頁面屬於fragment

public class ViewPagerAdapter extends FragmentStateAdapter {
    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        if (position == 0){
            return new FirstFragment();
        }
        else {
            return new SecondFragment();
        }
    }

    @Override
    public int getItemCount() {
        return 2;
    }
}

這樣簡單的在activity底下切換fragment的簡單程式就完成囉!!!以下成果展示


上一篇
[day16]TabLayout
下一篇
[day18]seekbar並使用了Toast
系列文
深入Android 物件的認識與應用實踐30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言